<template>
    <!-- Hero 区域 - 全屏三栏产品展示 -->
    <div class="w-full grid grid-cols-1 md:grid-cols-3 h-screen">
        <!-- 左侧产品 - 优雅连衣裙 -->
        <div class="relative overflow-hidden bg-gradient-to-br from-black to-purple-900">
            <!-- 背景光效 -->
            <div class="absolute inset-0 bg-cover bg-center opacity-100 mix-blend-inherit" style="background-image: url('/images/hero-2.jpeg');"></div>
            <div class="absolute left-0 bottom-0 w-full h-3/4 bg-gradient-to-t from-black to-transparent"></div>
            
            <!-- 内容 -->
            <div class="relative z-10 flex flex-col justify-end items-center h-full p-8 pb-16">
                <h3 class="text-3xl font-bold text-white mb-2 font-playball tracking-wide">Elegant Dresses</h3>
                <p class="text-white mb-6 text-base font-poppins font-medium tracking-wide">Highlight your feminine curves</p>
                <button class="bg-white cursor-pointer text-black w-36 py-2 rounded-full font-poppins font-bold text-sm tracking-widest uppercase hover:bg-rose-600 hover:text-white transition">
                    Shop Now
                </button>
            </div>
        </div>
        
        <!-- 中间产品 - 时尚外套 -->
        <div class="relative overflow-hidden bg-gradient-to-br from-black to-green-900">
            <!-- 背景光效 -->
            <div class="absolute inset-0 bg-cover bg-center opacity-100 mix-blend-inherit" style="background-image: url('/images/hero-1.jpeg');"></div>
            <div class="absolute left-0 bottom-0 w-full h-3/4 bg-gradient-to-t from-black to-transparent"></div>
            
            <!-- 内容 -->
            <div class="relative z-10 flex flex-col justify-end items-center h-full p-8 pb-16">
                <h3 class="text-3xl font-bold text-white mb-2 font-playball tracking-wide">Stylish Jackets</h3>
                <p class="text-white mb-6 text-base font-poppins font-medium tracking-wide">Stand out from the crowd</p>
                <button class="bg-white cursor-pointer text-black w-36 py-2 rounded-full font-poppins font-bold text-sm tracking-widest uppercase hover:bg-rose-600 hover:text-white transition">
                    Shop Now
                </button>
            </div>
        </div>
        
        <!-- 右侧产品 - 精品配饰 -->
        <div class="relative overflow-hidden bg-gradient-to-br from-black to-red-900">
            <!-- 背景光效 -->
            <div class="absolute inset-0 bg-cover bg-center opacity-100 mix-blend-inherit" style="background-image: url('/images/hero-3.jpeg');"></div>
            <div class="absolute left-0 bottom-0 w-full h-3/4 bg-gradient-to-t from-black to-transparent"></div>
            
            <!-- 内容 -->
            <div class="relative z-10 flex flex-col justify-end items-center h-full p-8 pb-16">
                <h3 class="text-3xl font-bold text-white mb-2 font-playball tracking-wide">Premium Accessories</h3>
                <p class="text-white mb-6 text-base font-poppins font-medium tracking-wide">Complete your perfect look</p>
                <button class="bg-white cursor-pointer text-black w-36 py-2 rounded-full font-poppins font-bold text-sm tracking-widest uppercase hover:bg-rose-600 hover:text-white transition">
                    Shop Now
                </button>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
    name: 'Hero',
});
</script>